import React, { useEffect, useState } from 'react'
import { InfiniteScroll, PullToRefresh, List ,Avatar,Divider} from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from './index.module.less'
import { useStore } from '@/store'
import HtmlContent from '@/components/HtmlContent'
import Icon from '@/components/Icons'
const CommentMsg = (props: { itemKey: string }) => {
    const avatar = useStore(state => state.avatar)
  const { itemKey } = props
  function getNextData() {
    const ret: string[] = []
    for (let i = 0; i < 20; i += 1) {
      ret.push(`${i}`)
    }
    return ret
  }
  const [data, setData] = useState<string[]>([])
  const [hasMore, setHasMore] = useState(true)
  const loadMore = async () => {
    const append = await getNextData()
    setData([...data, ...append])
    setHasMore(append.length > 10)
  }

  useEffect(() => {
    setData([])
    getNextData()
  }, [])
  return (
    <div className="tabItemBox">
      <PullToRefresh
        key={itemKey}
        onRefresh={async () => {
          await sleep(1000)
          setData([...getNextData(), ...data])
        }}
      >
          {data.map((item: any, index: number) => (
            <div key={index} className={styles.cardItem}>
                <div className={styles.cardLeft}>
                <Avatar style={{ '--border-radius': '50%', '--size': '36px' }} src={avatar} />
                </div>
               <div className={styles.main}>
               <div className={styles.conetnt}>
               <div className={styles.cardCenter}>
                    <div className={styles.userBox}>
                        <span className={styles.nickName}>AURORA^桉榆🌟</span>
                        <span className={styles.userTag}>你的好友</span>
                    </div>
                    <div className={styles.actionType}>
                        {/* <span>回复了你的评论</span> */}
                        <span>评论了你的笔记</span>
                        <span>2024-11-20</span>
                    </div>
                    <div className={styles.comment}>
                    <HtmlContent content='哈哈哈哈哈' />
                    </div>
                    <div className={styles.iconBox}>
                        <div className={styles.icon}>
                            <Icon iconName='icon-comment-v2' />
                            <span>回复</span>
                        </div>
                        <div className={styles.icon}>
                            <Icon iconName='icon-shuju_xiaohongshudianzan_xianxing' />
                        </div>
                    </div>
                </div>
                <div className={styles.cardRight}>
                    <img src="http://ci.xiaohongshu.com/1040g00831adgqqht7i5g5nr6qjlg95kovd0qt98?imageView2/2/w/1080/format/jpg" alt="" />
                </div>
               </div>
                <Divider></Divider>
               </div>
            </div>
          ))}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}
export default CommentMsg
